<template>
	<div class="user_comment">
		<!-- 1.0导航模块 -->
		<van-nav-bar fixed placeholder title="我的跟帖" left-text="返回" left-arrow @click-left="$router.back()">
		</van-nav-bar>

		<!-- 2.0评论列表 -->
		<div class="commentlist">
			<div class="list_item" v-for="item in commentList" :key="item.id">
				<span class="date">{{item.create_date | formatDate}}</span>
				<!-- 回复引用窗口 -->
				<div class="parent" v-if="item.parent">
					<span>回复：{{item.parent.user.nickname}}</span>
					<p>{{item.parent.content}}</p>
				</div>
				<p class="comment_content">{{item.content}}</p>
					<p class="article">
						<router-link class="article_link" :to="`/article/${item.post.id}`">原文：{{item.post.title}}</router-link>
					</p>
			</div>
		</div>



		<!-- 3.0空列表 -->
		<van-empty description="暂无收藏" v-if="!commentList.length" />
	</div>
</template>

<script>
	import {
		userCommentsListApi
	} from '../apis/user.js'
	export default {
		data() {
			return {
				commentList: []
			}
		},


		async created() {
			const res = await userCommentsListApi();
			this.commentList = res.data.data;
			console.log(this.commentList);
		}
	}
</script>

<style lang="less" scoped>
	.commentlist {
		background-color: #eeeeee;

		.list_item {
			padding: 10px;
			border-bottom: 1px solid #aaaaaa;
			
			
			.parent{
				height: 70px;
				background-color: #dadada;
				margin-top: 10px;
				padding: 5px;
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				span {
					font-size: 13px;
					color: #888888;
				}
				p {
					font-size: 17px;
					color: #888888;
					margin: 0;
					width: 90%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			
			
			p {
				margin: 15px 0;
			}

			.date {
				font-size: 13px;
				color: #888888;
			}

			.comment_content {
				font-size: 17px;

			}

			.article{
				color: #888888;
				font-size: 14px;
				display: flex;
			}
			.article_link {
				color: inherit;
				width: 90%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
